<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <div style="width:700px;height:auto;background:#fff;margin:0 auto;">
        <img
          style="width:100%;height:300px;"
          v-for="item in imgList"
          :key="item.id"
          :src="item"
          alt
        >

        <div class="intr">
          <p ref="text" class="text">{{travelInfo.travelDetail}}</p>
          <p>
            <span class="iconfont icon-shijian"></span>
            &nbsp;&nbsp;{{travelInfo.createTime}} &nbsp;&nbsp;&nbsp;
            <span
              class="iconfont icon-bianji"
            ></span>
            &nbsp;{{travelInfo.travelName}}
          </p>
        </div>
        <div class="message">
          <div style="margin-top:10px">
            <input type="text" v-model="message" placeholder="留言" style="margin-left:5px;width:85%">
            <input
              type="submit"
              ref="send"
              @click="send"
              style="margin-left:10px;width:80px;height:40px"
              value="提交"
            >
          </div>
          <ul class="mui-table-view">
            <li
              class="mui-table-view-cell mui-media"
              v-for="item in messageList"
              :key="item.messageId"
            >
              <a href="javascript:;" style="display:flex; align-items: center;white-space:normal">
                <img class="mui-media-object mui-pull-left" :src="item.userHead">
                <div class="mui-media-body">
                  <span style="color:#4abdcc">{{item.userName}}:</span>&nbsp;
                  <span style="font-size:14px;">{{item.messageContent}}</span>
                  <p style="width:610px;font-size:12px;margin-top:5px" class="mui-ellipsis">
                    <span>发表时间:</span>

                    {{item.createTime}}
                    <span
                      v-if="user==item.userName"
                      style="float:right;color:#4abdcc"
                      @click="deleteMessage(item.messageId)"
                    >删除</span>
                  </p>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: localStorage.getItem("user"),
      message: "",
      id: this.$route.query.id,
      imgList: [],
      travelInfo: {},
      messageList: []
    };
  },
  created() {
    this.findTravelById(this.id);
    this.getMessaeList(this.id);
  },
  methods: {
    findTravelById(id) {
      this.$axios.get("/findTravelById?id=" + id).then(res => {
        this.travelInfo = res.data;
        console.log(this.travelInfo);
        this.imgList = res.data.travelImgs.split(",");
        console.log(res.data);
      });
    },
    getMessaeList() {
      this.$axios
        .get("/findMessageById", {
          params: {
            id: this.id
          }
        })
        .then(res => {
          this.messageList = res.data;
          console.log(this.messageList);
        });
    },
    send() {
      if (this.message.trim() == "") {
        this.$Message.error("留言不能为空！");
        return false;
      }
      if (localStorage.getItem("user") == null) {
        this.$Message.error("请登录后再留言！");
        return false;
      }
      this.$axios
        .get("/sendMessage", {
          params: {
            messageContent: this.message,
            userName: localStorage.getItem("user"),
            userHead:
              "http://javawebs.cn/app/wang/" +
              parseInt(Math.random() * 10 + 1) +
              ".jpg",
            travelId: this.id
          }
        })
        .then(res => {
          this.$Message.success("留言成功");
          this.message = "";
          this.messageList.unshift(res.data);
        })
        .catch(err => {
          this.$Message.error("留言失败");
        });
    },
    deleteMessage(id) {
      this.$Modal.confirm({
        title: "对话框",
        content: "<p>确定删除该留言?</p>",
        onOk: () => {
          //  var messageList=this.messageList;
          var i = 1;
          this.$axios.get("/deleteMessageById?id=" + id).then(res => {
            if (res.data.msg == "success") {
              this.$Message.success("删除成功");
              var newMessaheList = [];
              console.log(this.messageList);
              this.messageList.forEach(item => {
                if (item.messageId != id) {
                  newMessaheList.push(item);
                }
              });
              this.messageList = newMessaheList;
            } else {
              this.$Message.error("删除失败");
            }
          });
        },
        onCancel: () => {
          return false;
        }
      });
    }
  },
  mounted() {
    // this.$refs.wrapper.scrollIntoView();
    window.scrollTo(0, 0);
    setTimeout(() => {
      var content = this.$refs.text.innerHTML;
      this.$refs.text.innerHTML = content.replace(/。/g, "。<br/>");
    }, 1000);
  },
  beforeDestroy() {
    console.log("页面销毁了");
  }
};
</script>
<style lang="scss" scoped>
@import url("../../assets/css/mui.css");
.iconfont {
  font-size: 14px;
}
.wrapper {
  width: 100%;
  //height: 500px;
  //background-color: #eee;
  .content {
    width: 1000px;
    height: auto;
    margin: 20px auto;
    //background-color: #e7e7e7;
    .intr {
      margin: auto;
      width: 700px;
      font-size: 14px;
      border: 1px solid #e7e7e7;
      width: 100%;
      padding: 5px;
      .text {
        color: #333;
      }
    }
    img {
      margin-bottom: 10px;
    }
  }
}
</style>
